<!--
 * @Descripttion: 客户管理列表页
 * @version:
 * @Author: cxguo
 * @Date: 2019-08-02 15:03:05
 * @LastEditors: cxguo
 * @LastEditTime: 2020-11-12 15:12:12
 -->
<template>
  <div class="app-container">
    <div class="clearfix">
      <el-card shadow="never" class="oper-btn-card">
        <div class="clearfix">
          <el-form
            class="fl form-no-bottom"
            :inline="true"
            :model="searchData"
            label-position="left"
            label-width="80px"
            @keydown.enter.native="btnSearch"
          >
            <el-form-item label="商品分类: ">
              <cat-tree-select v-model="searchData.catId" />
            </el-form-item>
            <el-form-item>
              <el-input
                v-model="searchData.keywords"
                clearable
                style="width: 360px"
                placeholder="按编号,名称搜索"
              >
                <el-button slot="append" icon="el-icon-search" type="primary" :loading="btnLoading.search" @click="btnSearch()" />
              </el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
    <div>
      <vxe-grid
        ref="table"
        class="grid"
        border
        resizable
        highlight-hover-row
        :loading="tableLoading.table"
        :edit-config="{trigger: 'click', mode: 'row'}"
        :columns="columnsData"
        :data="tableData.table"
      />
    </div>
    <div class="pagination-container">
      <el-pagination
        background
        layout="total, sizes,prev, pager, next,jumper"
        :page-size="pageInfo.rows"
        :page-sizes="[20,30,40]"
        :current-page.sync="pageInfo.page"
        :total="pageInfo.total"
        @size-change="onSizeChange"
        @current-change="onCurrentChange"
      />
    </div>
  </div>
</template>
<script>
import { oftenuse } from '@/libs/mixins'
import { getWarningGoods as listData } from '@/api/stock/stock-warn.js'
import CatTreeSelect from '@/views/components/GoodsCatTreeSelect'

export default {
  name: 'StoreList',
  filters: {
  },
  components: { CatTreeSelect },
  mixins: [oftenuse],
  data() {
    return {
      searchData: {},
      columnsData: [
        { field: 'code', title: '编号', width: 150 },
        { field: 'name', title: '商品名称', width: 200 },
        { field: 'unitName', title: '单位', width: 100 },
        { field: 'quantity', title: '可用库存', width: 100 },
        { field: 'minQtyWarning', title: '最低库存量', width: 100 },
        { field: 'maxQtyWarning', title: '最高库存量', width: 100 }
      ]
    }
  },
  watch: {
  },
  created() {
    this.getWarningGoods()
  },
  methods: {
    btnSearch() {
      this.setBtnLoading('search', true)
      this.getWarningGoods().then(res => {
        this.setBtnLoading('search', false)
      }).catch(err => {
        console.log(err)
        this.setBtnLoading('search', false)
      })
    },
    // table btns
    // api
    getWarningGoods(params = { data: this.searchData, page: this.pageInfo }) {
      this.setTableLoading('table', true)
      return new Promise((resolve, reject) => {
        listData(params).then(res => {
          this.setTableLoading('table', false)
          this.setTableData('table', res.data.records)
          this.pageInfo.total = res.data.total
          resolve(res)
        }).catch(err => {
          this.setTableLoading('table', false)
          this.$notify.error({ title: '查询异常！', message: err.message })
          reject(err)
        })
      })
    },
    // on
    onSelectionChange(selectionData) {
      this.setTableSelectionData('table', selectionData)
    },
    onSizeChange(val) {
      this.pageInfo.current = 1
      this.pageInfo.size = val
      this.getWarningGoods()
    },
    onCurrentChange(val) {
      this.pageInfo.current = val
      this.getWarningGoods()
    }
  }
}
</script>
<style scoped>

</style>
